<script lang="ts" setup>
import { get, post, message, loadFile } from '@/utils'
import useTable from '@/hooks/useTable'
import { TableColumnData } from '@arco-design/web-vue'
import ViewImageBtn from '@/components/buttons/ViewImage.vue'
import ViewVideoBtn from '@/components/buttons/ViewVideo.vue'
interface Data {
  label: string
  value: any
  span?: number
  type?: 'image' | 'tag' | 'tagList' | 'viewImg' | 'video'
}
const props = defineProps<{
  show: boolean
  id: number | string
}>()
const emit = defineEmits(['update:show', 'reset', 'confirm'])

/**发布用户 */
const userData = ref<Data[]>([])
/**发布内容 */
const contentData = ref<Data[]>([])
/**绑定商品 */
const goodsData = ref<any[]>([])

const tagList = ref<any[]>([])
const getTagList = () => {
  return new Promise(reslove => {
    get({ url: '/server-social/admin/topic/tag/list' }, ({ data }) => {
      tagList.value = data
      reslove({})
    })
  })
}
const classify = ref<any[]>([])
const getClassify = () => {
  return new Promise(reslove => {
    get({ url: '/server-social/admin/topic/category/list' }, ({ data }) => {
      classify.value = data
      reslove({})
    })
  })
}
const getInfo = () => {
  get({ url: '/server-social/admin/topic/info', data: { id: props.id } }, ({ data }) => {
    userData.value = [
      { label: '用户头像', value: data.userAvatar, type: 'image' },
      { label: '用户ID', value: data.userId },
      { label: '用户昵称', value: data.userNickName },
    ]
    const _tagIds = data.tag.split(',')
    const _tagList = tagList.value.filter(f => _tagIds.some(v => v == f.id))
    const [category] = classify.value.filter(f => f.id == data.categoryId)
    contentData.value = [
      { label: '发布标题', value: data.title },
      { label: '绑定话题', value: _tagList, type: 'tagList' },
      { label: '绑定分类', value: category.name, type: 'tag' },
      { label: '发布图片', value: data.img, type: 'viewImg' },
      { label: '发布视频', value: data.video, type: 'video' },
      { label: '发布内容', value: data.content },
    ]
    goodsData.value = data.goodsList
  })
}
onMounted(() => {
  Promise.all([getClassify(), getTagList()]).then(res => {
    getInfo()
  })
})
const { formatColumns } = useTable()
const columns = formatColumns([
  {
    title: '商品图片',
    dataIndex: 'img',
  },
  {
    title: '商品名称',
    dataIndex: 'name',
  },
  {
    title: '商品价格',
    dataIndex: 'goodsPrice',
  },
  {
    title: '商品数量',
    dataIndex: 'goodsNum',
  },
  {
    title: '商品规格',
    dataIndex: 'goodsSpec',
  },
]) as TableColumnData[]
</script>
<template>
  <CModal v-model:visible="props.show" width="1000px" :footer="false" title="查看" @cancel="emit('update:show', false)">
    <a-space style="display: table; width: 100%" direction="vertical" :size="20">
      <a-descriptions :column="3" bordered title="用户信息">
        <a-descriptions-item v-for="item of userData" :label="item.label">
          <a-image-preview-group v-if="item.type == 'image'">
            <a-image :src="img" width="40" v-for="img in item.value.split(',')" />
          </a-image-preview-group>
          <a-space v-else-if="item.type == 'tag'">
            <a-tag v-for="tag in item.value">{{ tag.name }}</a-tag>
          </a-space>
          <span v-else>
            {{ ![undefined, null, ''].includes(item.value) ? item.value : '-' }}
          </span>
        </a-descriptions-item>
      </a-descriptions>
      <a-descriptions :column="3" bordered title="内容信息">
        <a-descriptions-item v-for="item of contentData" :label="item.label">
          <a-image-preview-group v-if="item.type == 'image'">
            <a-image :src="img" width="40" v-for="img in item.value.split(',')" />
          </a-image-preview-group>
          <a-space v-else-if="item.type == 'tagList'">
            <a-tag v-for="tag in item.value">#{{ tag.name }}</a-tag>
          </a-space>
          <a-tag v-else-if="item.type == 'tag'">{{ item.value }}</a-tag>
          <ViewImageBtn :imgs="item.value" v-else-if="item.type == 'viewImg'" />
          <ViewVideoBtn :src="item.value" v-else-if="item.type == 'video'" />

          <span v-else>
            {{ ![undefined, null, ''].includes(item.value) ? item.value : '-' }}
          </span>
        </a-descriptions-item>
      </a-descriptions>

      <p class="title">绑定商品</p>
      <a-table :columns="columns" :data="goodsData" :pagination="false" :bordered="{ cell: true }">
        <template #img="{ record }">
          <a-image :src="record.img" width="50" />
        </template>
      </a-table>
    </a-space>
  </CModal>
</template>
<style lang="less" scoped>
.title {
  margin-bottom: 12px;
  color: var(--color-text-1);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5715;
}
</style>
